<template xmlns="http://www.w3.org/1999/html">
  <div class="container">
    <el-container class="main-container container">
      <el-aside width="collapse">
        <el-scrollbar class="container menu-aside">
          <div class="line-height-50">
            <el-image :src="Logo" fit="cover" alt="" :class="[statusData.isCollapse?'logo-center':'logo']"/>
            <h4 class="color-white aside-h" v-show="!statusData.isCollapse">后台管理</h4>
          </div>
          <el-menu :collapse="statusData.isCollapse"
                   class="el-menu-vertical"
                   router
                   :default-active="currentRouter.fullPath"
                   @select="menuChange"
                   text-color="rgb(191, 203, 217)"
                   background-color="rgb(48,65,86)">
            <el-menu-item index="/backend/user">
              <el-icon>
                <UserFilled/>
              </el-icon>
              <template #title>
                <span>用户管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/backend/warning">
              <el-icon>
                <Document/>
              </el-icon>
              <template #title>
                <span>预警管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/backend/data">
              <el-icon>
                <Management/>
              </el-icon>
              <template #title>
                <span>数据管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/backend/model">
              <el-icon>
                <HelpFilled/>
              </el-icon>
              <template #title>
                <span>模型管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/backend/train">
              <el-icon><Notification /></el-icon>
              <template #title>
                <span>模型训练</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/backend/table">
              <el-icon>
                <Reading/>
              </el-icon>
              <template #title>
                <span>数据表管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/backend/schedule">
              <el-icon>
                <Clock/>
              </el-icon>
              <template #title>
                <span>调度管理</span>
              </template>
            </el-menu-item>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-container class="right-menu">
        <el-header class="menu-header">
          <div class="collapse-status" @click="statusData.isCollapse=!statusData.isCollapse">
            <el-icon :size="22">
              <Expand/>
            </el-icon>
          </div>
          <div class="left-menu">
            <el-breadcrumb class="left-menu-item" separator="/">
              <el-breadcrumb-item>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="right-menu">
            <div class="right-menu-item">
              <el-icon :size="22">
                <Search/>
              </el-icon>
            </div>
            <div class="right-menu-item">
              <el-icon :size="22">
                <FullScreen/>
              </el-icon>
            </div>
            <el-dropdown class="height-100">
              <div class="right-menu-item">
                <el-avatar shape="circle" src="../src/assets/default.png"/>
                <el-icon :size="12">
                  <ArrowDown/>
                </el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item @click="router.push({name:'index'})">返回主页</el-dropdown-item>
                  <el-dropdown-item @click="logoutUser">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-drawer v-model="statusData.isDrawer" title="布局中心">
              <el-color-picker v-model="userInfo.color"/>
            </el-drawer>
          </div>
        </el-header>
        <div class="header-tag-container">
          <el-scrollbar>
            <el-header height="43px" class="text-start tag-header">
              <el-tag hit closable
                      class="tag"
                      @click="tagChange(<RouteRecordNormalized>tag)"
                      @close="tagClose(<RouteRecordNormalized>tag)" v-for="tag in tagsData"
                      :type="currentRouter.path==tag.path?'primary':'info'"
              >
                {{ tag.meta.title }}
              </el-tag>
            </el-header>
          </el-scrollbar>
        </div>
        <el-main>
          <el-scrollbar>
            <router-view v-slot="{ Component }">
              <transition name="fade">
                <keep-alive>
                  <component :is="Component"></component>
                </keep-alive>
              </transition>
            </router-view>
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import {computed, onBeforeMount, ref} from "vue";
import {debounce, SelfEventListener} from "@/api/common.ts";
import Logo from "@/assets/logo.png"
import router from "@/router/router.ts";
import {RouteLocationNormalizedLoaded, RouteRecordNormalized} from "vue-router";
import {logout, removeToken} from "@/api/login.ts";
import {Management} from "@element-plus/icons-vue";

onBeforeMount(() => {
  init()
})

const init = () => {
  initTags()
  initListener()
  resizeWidth()
}
/**
 * 初始化一些监听事件
 */
const initListener = () => {
  let func = debounce(resizeWidth, 500)
  let li = () => {
    func()
  }
  timers.listener.push({
    event: "resize", func: li, userCapture: window
  })
  window.addEventListener("resize", li);
}

/**
 * 初始化tag标签
 */
const initTags = () => {
  let tag = router.getRoutes().find((item) => item.path == router.currentRoute.value.path)
  if (tag.meta.title) {
    tagsData.value.push(tag)
  }
}

/**
 * 防抖在页面宽度变化时
 */
const resizeWidth = () => {
  if (document.body.clientWidth <= 1024) {
    statusData.value.isCollapse = true;
  }
}

const statusData = ref({
  isCollapse: false,
  isFull: false,
  isDrawer: false,
})

const timers: SelfEventListener = {
  time: [],
  interval: [],
  listener: []
}

const tagsData = ref<RouteRecordNormalized[]>([])

const currentRouter = computed<RouteLocationNormalizedLoaded>(() => {
  let current = router.currentRoute.value
  let fullPath = current.fullPath;
  let path = current.path
  if (path.endsWith("/")) {
    current.path = path.substring(0, path.length - 1)
  }
  if (fullPath.endsWith("/")) {
    current.fullPath = fullPath.substring(0, path.length - 1)
  }
  return current
})

/**
 *  菜单改变事件
 */
const menuChange = (url: string) => {
  if (tagsData.value.findIndex((item) => item.path == url) == -1) {
    let tag = router.getRoutes().find((item) => item.path == url)
    if (tag) {
      tagsData.value.push(tag)
    }
  }
}

/**
 * 标签改变事件
 */
const tagChange = (tag: RouteRecordNormalized) => {
  if (tag.path == currentRouter.value.path) {
    return
  }
  router.push(tag.path)
}

/**
 * 标签关闭事件
 */
const tagClose = (tag: RouteRecordNormalized) => {
  tagsData.value.splice(tagsData.value.indexOf(tag), 1)
  if (tag.path == currentRouter.value.path && tagsData.value.length > 0) {
    router.push(tagsData.value[tagsData.value.length - 1].path)
  } else if (tag.path == currentRouter.value.path && tagsData.value.length == 0) {
    menuChange("/backend/user")
    router.push("/backend")
  }
}

const logoutUser = () => {
  logout().then(removeToken)
}
</script>
<style scoped>
.menu-header {
  padding: 0;
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
}

.text-start {
  text-align: start;
}

.menu-aside {
  background-color: rgb(48, 65, 86);
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
}

.container {
  box-sizing: border-box;
  height: 100vh;
  transition: width 0.5s;
}

.main-container {
  width: 100vw;
}

.el-menu-vertical {
  border: none;
  margin: auto;
}

.color-white {
  color: #fff;
}

.aside-h {
  transition: opacity 0.5s;
  display: inline-block;
  font-size: medium;
  margin: 0;
}

.collapse-status:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, .025);
}

.collapse-status {
  padding: 0 12px;
  display: flex;
  float: left;
  align-items: center;
  height: 100%;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
}

.logo {
  display: inline-block;
  height: 24px;
  width: 24px;
  margin-right: 12px;
  vertical-align: middle;
}

.logo-center {
  margin: 0;
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: middle;
}

.line-height-50 {
  line-height: 50px;
}

.div-inline {
  display: inline-block;
}

.div-hover:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, .025);
}

.vertical-middle {
  vertical-align: sub;
}

.padding-12 {
  padding: 0 6px;
}

.right-menu {
  float: right;
  height: 100%;
}

.right-menu-item {
  display: inline-flex;
  padding: 0 8px;
  height: 100%;
  vertical-align: top;
  align-items: center;
  position: relative;
}

.right-menu-item:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, .025) !important;
}

.height-100 {
  height: 100%;
}

.el-tooltip__trigger:focus-visible {
  outline: none;
}

.left-menu {
  display: flex;
  float: left;
  height: 100%;
  align-items: center;
}

.header-tag {
  background: #fff;
  border-bottom: 1px solid #d8dce5;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
}

.tag:hover {
  cursor: pointer;
}

.tag {
  padding: 0 8px;
  margin-left: 5px;
}

.header-tag-container {
  background: #fff;
  border-bottom: 1px solid #d8dce5;
  width: 100%;
  white-space: nowrap;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
}

.tag-header {
  display: block;
  line-height: 43px;
}

.fade-enter-from {
  opacity: 0;
  transform: translateX(-5%);
}

.fade-enter-active {
  transition: all 0.3s;
}

.fade-enter-to {
  opacity: 1;
  transform: translateX(0);
}

.fade-leave-from {
  opacity: 0;
}
</style>